// TYPOGRAPHY
$font-monospace: "Inconsolata", monospace;
$font-sans-serif: "Montserrat", sans-serif;
$font-size: 20px;
$font-size-large: 26px;
$font-size-small: 16px;
$font-size-smallest: 13px;
$font-size-icon: 24px;

// COLORS
// Monochrome
$color-white: #ffffff;
$color-off-white: #eef1f1;
$color-black: #000000;
$color-gray-50: #586e75; // Solarized base01
$color-gray-30: #073642; // Solarized base02
$color-gray-20: #002b36; // Solarized base03 (darkest bg tone)
$color-gray-10: #001b20; // Brand

// Legacy grayscale
$color-gray-darker: #00242d;
$color-gray-lightest: #93a1a1; // Solarized base1 (darkest content tone)

// Brand Colors
$color-green: #20ba31;
$color-green-light: #70d37b;
$color-blue: #03c7d3;
$color-blue-light: #5edbe3;
$color-blue-dark: #007d82;
$color-purple: #6378ba;
$color-red: #f6685c;
$color-pink: #ef5aa0;
$color-yellow: #fcb41e;

$translucent: 0.3;
$translucent-ish: 0.7;

// LAYOUT
$spacing-unit: 32px;

$topbar-height: $spacing-unit * 2.25;
$tabnav-height: $topbar-height;
$tabnav-width: 160px; // Fits our current labels
$analyticsNudge-height: $tabnav-height * 1.5;
$alert-badge: $spacing-unit * 0.75;
$modal-width: $spacing-unit * 15;

$logLine-separator-height: 2px;
$logLine-gutter-width: 6px;

$statusbar-tiltPanel-width: $spacing-unit * 1.75;

$tablet-width: 1500px;

$statusbar-height: $spacing-unit * 1.5; // Height.statusbar

// Z-Index
$z-modal: 3000;
$z-analyticsNudge: 2000;

// MISC
$animation-timing: 200ms;

@mixin button-text() {
  font-family: $font-sans-serif;
  line-height: 1;
  font-size: $font-size-small;
  text-transform: uppercase;
}

.u-hide {
  display: none !important;
  visibility: hidden !important;
}
.u-flexColumn {
  display: flex !important;
  flex-direction: column !important;
}
.u-flexRow {
  display: flex !important;
  flex-direction: row !important;
}
